import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
// 每次刚进入 网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 中
var car = JSON.parse(localStorage.getItem('car') || '[]')
// 创建Vuex的store实例
var store = new Vuex.Store({
  // 定义公共数据 类似data 
  // this.$store.state.***
  state: {
    // 将 购物车中的商品的数据，用一个数组存储起来，在 car 数组中，存储一些商品的对象， 咱们可以暂时将这个商品对象，设计成这个样子   
    // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
    car: car
  },
  // 用来定义修改数据的方法
  // this.$store.commit('方法名', '参数')
  mutations: {
    // some是对数据进行遍历的方法  只要回调函数内部return true 那么遍历就结束了
    addToCar(state, goodsinfo) {
      // 点击加入购物车 把商品信息 保存到 store中的car上
      // 分析:
      // 1.如果购物车中 之前就有这个商品信息 那么只需要修改数量
      // 2.如果没有直接把商品数据push进car里面

      // 假设购物车里面没有这个商品
      var flag = false

      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          // 如果有那么把数量加到car里的count
          item.count += parseInt(goodsinfo.count)
          // 把立下的flag也改为true
          flag = true
          return true
        }

      })
      // 如果循环之后得到的flag还是false 那么就直接把数据push到car里面去 
      if (!flag) {
        state.car.push(goodsinfo)
      }
      // 当更新car之后 把car数组储存到本地储存之中
      localStorage.setItem('car',JSON.stringify(state.car))
    },
  },
  // this.$store.getters.***
  // 相当于 计算属性，也相当于 filters
  getters: {
    getAllCount(state) {
      var c = 0
      state.car.forEach(item => {
        c += item.count
      })
      return c
    }
  },
  // 用来定义异步方法
  // this.$store.dispath
  actions: {

  },
  // 如果一个项目里的数据要分块进行处理  每一块都可以拥有自己的模块
  modules: {

  }
})

export default store
